<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="提现详情"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div
                class="withdraw-record-box"
                v-if="withdrawInfo.voucher"
            >
                <img
                    class="withdraw-record-img"
                    :src="withdrawInfo.voucher"
                />
            </div>

            <div class="withdraw-info-box">
                <div class="record-info">
                    <span class="record-info-name">提现进度</span>
                    <span class="record-info-detail status">{{withdrawStatus[withdrawInfo.status]}}</span>
                </div>
                <div class="record-info">
                    <span class="record-info-name">提现金额</span>
                    <span class="record-info-detail">￥{{withdrawInfo.money | currency}}</span>
                </div>
                <div class="record-info">
                    <span class="record-info-name">银行卡</span>
                    <span class="record-info-detail">{{withdrawInfo.bank_name}}</span>
                </div>
                <div class="record-info">
                    <span class="record-info-name">开户行</span>
                    <span class="record-info-detail">{{withdrawInfo.bank_branch}}</span>
                </div>
                <div class="record-info">
                    <span class="record-info-name">银行卡号</span>
                    <span class="record-info-detail">{{withdrawInfo.bank_card}}</span>
                </div>
                <div class="record-info">
                    <span class="record-info-name">提现时间</span>
                    <span class="record-info-detail">{{withdrawInfo.add_time}}</span>
                </div>
                <div class="record-info">
                    <span class="record-info-name">处理时间</span>
                    <span class="record-info-detail">{{withdrawInfo.finish_time}}</span>
                </div>
                <div class="record-info">
                    <span class="record-info-name">备注</span>
                    <span class="record-info-detail">{{withdrawInfo.remark}}</span>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'WithdrawDetail',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            withdrawStatus: ['审核中', '提现成功', '提现失败'],
            withdrawInfo: ''
        }
    },
    mounted() {
        this.getRecordDetail()
    },
    methods: {
        getRecordDetail() {
            let postData = this.qs.stringify({
                id: this.$route.query.recordId
            })
            this.axios
                .post('/api/user/money/take_out_logs_detail.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.withdrawInfo = data.data
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.withdraw-record-box
    padding 0.37rem
    text-align center
    background #fff
    .withdraw-record-img
        width 8rem
.withdraw-info-box
    margin-top 0.18rem
    padding-left 0.37rem
    background #fff
    .record-info
        display flex
        align-items center
        padding 0.27rem 0.37rem 0.27rem 0
        border-bottom 1px solid #e5e5e5
        .record-info-name
            width 2rem
            font-size 0.33rem
            color #333
        .record-info-detail
            flex 1
            min-width 1px
            text-align right
            line-height 1.3
            font-size 0.33rem
            color #666
        .status
            color #d7463c
    .record-info:last-child
        border none
</style>
